<template>
  <div class="log-detail-page">
    <HeaderNav />
    <div class="content">
      <el-page-header @back="goBack" title="返回" content="操作日志详情" class="page-header" />

      <div class="log-detail-card" v-loading="loading">
        <div v-if="logDetail" class="log-content">
          <!-- 基本信息 -->
          <el-card class="info-card">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="日志ID">{{ logDetail.id }}</el-descriptions-item>
              <el-descriptions-item label="用户">{{ logDetail.user_name }}</el-descriptions-item>
              <el-descriptions-item label="IP地址">{{ logDetail.ip_address }}</el-descriptions-item>
              <el-descriptions-item label="HTTP方法">
                <el-tag :type="getMethodTagType(logDetail.method)">
                  {{ logDetail.method }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="请求URL" :span="2">{{ logDetail.url }}</el-descriptions-item>
              <el-descriptions-item label="状态码">
                <el-tag :type="logDetail.status_code === 200 ? 'success' : 'danger'">
                  {{ logDetail.status_code }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="执行时间">{{ logDetail.duration }} ms</el-descriptions-item>
              <el-descriptions-item label="操作时间" :span="2">{{ formatDateTime(logDetail.created_at) }}</el-descriptions-item>
            </el-descriptions>
          </el-card>

          <!-- 请求参数 -->
          <el-card class="data-card">
            <template #header>
              <div class="card-header">
                <span>请求参数</span>
              </div>
            </template>
            <div class="data-content">
              <pre v-if="logDetail.request_params">{{ formatJson(logDetail.request_params) }}</pre>
              <div v-else class="empty">无请求参数</div>
            </div>
          </el-card>

          <!-- 响应数据 -->
          <el-card class="data-card">
            <template #header>
              <div class="card-header">
                <span>响应数据</span>
              </div>
            </template>
            <div class="data-content">
              <pre v-if="logDetail.response_data">{{ formatJson(logDetail.response_data) }}</pre>
              <div v-else class="empty">无响应数据</div>
            </div>
          </el-card>

          <!-- 用户代理 -->
          <el-card class="data-card">
            <template #header>
              <div class="card-header">
                <span>用户代理</span>
              </div>
            </template>
            <div class="data-content">
              <div v-if="logDetail.user_agent">{{ logDetail.user_agent }}</div>
              <div v-else class="empty">无用户代理信息</div>
            </div>
          </el-card>
        </div>

        <div v-else-if="!loading" class="empty-state">
          <el-empty description="未找到日志详情" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import HeaderNav from '@/components/HeaderNav.vue';
import { getOperationLogDetail } from '@/api/logs';

// 路由相关
const route = useRoute();
const router = useRouter();

// 响应式数据
const logDetail = ref(null);
const loading = ref(false);

// 返回上一页
const goBack = () => {
  router.back();
};

// 获取日志详情
const fetchLogDetail = async (id) => {
  loading.value = true;
  try {
    const response = await getOperationLogDetail(id);

    if (response.code === 200) {
      logDetail.value = response.data;
    } else {
      ElMessage.error(response.message || '获取日志详情失败');
    }
  } catch (error) {
    console.error('获取日志详情失败:', error);
    ElMessage.error('获取日志详情失败');
  } finally {
    loading.value = false;
  }
};

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
};

// 获取HTTP方法标签类型
const getMethodTagType = (method) => {
  switch (method) {
    case 'GET': return 'primary';
    case 'POST': return 'success';
    case 'PUT': return 'warning';
    case 'DELETE': return 'danger';
    default: return 'info';
  }
};

// 格式化JSON
const formatJson = (json) => {
  if (typeof json === 'string') {
    try {
      return JSON.stringify(JSON.parse(json), null, 2);
    } catch {
      return json;
    }
  }
  return JSON.stringify(json, null, 2);
};

// 组件挂载时获取数据
onMounted(() => {
  const logId = route.params.id;
  if (logId) {
    fetchLogDetail(logId);
  } else {
    ElMessage.error('缺少日志ID参数');
    router.back();
  }
});
</script>

<style scoped lang="scss">
.log-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    .page-header {
      margin-bottom: 20px;
    }

    .log-detail-card {
      .log-content {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .info-card,
        .data-card {
          .card-header {
            font-weight: bold;
            color: #333;
          }

          .data-content {
            pre {
              margin: 0;
              padding: 16px;
              background-color: #f5f7fa;
              border-radius: 4px;
              white-space: pre-wrap;
              word-wrap: break-word;
              font-family: 'Courier New', monospace;
              font-size: 14px;
              line-height: 1.5;
            }

            .empty {
              padding: 20px;
              text-align: center;
              color: #999;
            }
          }
        }
      }

      .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
    }
  }
}
</style>
